<!--头像-->
<template>
  <div class="avatar">
    <slot />
    <img
      @click="click"
      v-lazy="src"
      alt="avatar"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  props: {
    width: {
      type: [Number, String],
      default: 45,
    },
    height: {
      type: [Number, String],
      default: 45,
    },
    src: {
      type: [String, Object],
      default: require('~/assets/images/avatar.svg'),
    },
  },
})
export default class Avatar extends Vue {
  click() {
    this.$emit('on-img-click')
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  cursor: pointer;
}
</style>
